<template>
	<view class="content">
		<!-- 库存统计 -->
		<!-- 第一部分-搜索框 -->
		<view class="searchBox">
			<u-search bg-color="#F2F5F7" :show-action="false" placeholder="商品/批次"></u-search>
		</view>
		<!-- 第二部分下单时间 -->
		<view class="searchControl">
			评价时间：<el-date-picker class="start" prefix-icon="none" v-model="value1" type="date" placeholder="请选择时间" format="yyyy.MM.dd"></el-date-picker>
			<view class="" style="margin: 0 14rpx;">
				至
			</view>
			<el-date-picker class="start" prefix-icon="none" v-model="value2" type="date" placeholder="请选择时间" format="yyyy.MM.dd"></el-date-picker>
		</view>
		<!-- 第三部分搜索按钮 -->
		<view class="button">
			<button type="default" class="Reset">重置</button>
			<button type="default" class="Search">搜索</button>
		</view>
		<!-- 第四部分列表 -->
		<view class="statisticsList">
			<view class="title">
				<view class="Header">
					商品
				</view>
				<view class="Header">
					批次
				</view>
				<view class="Headerlong">
					入库时间
				</view>
				<view class="Headerlong">
					入库数量
				</view>
				<view class="Header">
					销售
				</view>
				<view class="Header">
					库存
				</view>
				<view class="Header">
					损耗
				</view>
			</view>
			<view class="msg" v-for="item in msgList">
				<view class="msgShop">
					尿不湿
				</view>
				<view class="msgShop">
					P202
				</view>
				<view class="msgShoplong">
					2020.10.10
				</view>
				<view class="msgShoplong">
					100
				</view>
				<view class="msgShop">
					16
				</view>
				<view class="msgShop">
					33
				</view>
				<view class="msgShop">
					6
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '',
				orderType: '',
				msgList:[{
					shop:'尿不湿',
					batch:'p202',
					starTime:'2020.10.10',
					starNum:'100',
					sale:'16',
					stock:'33',
					consume:'6'
				},{},{},{},{},{}]
			};
		}
	}
</script>

<style scoped lang="scss">
	.searchBox {
		width: 702rpx;
		height: 68rpx;
		margin: 26rpx auto;
	}

	.searchControl {
		width: 702rpx;
		margin: 26rpx auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		display: flex;
		line-height: 68rpx;
		.el-input {
			width: 264rpx;
			height: 68rpx;
			background: rgba(242, 245, 247, 1);
			padding: 0rpx 0rpx 0rpx 0rpx !important;
			.el-input__inner {
				padding: 0rpx !important;
			}
		}
	}

	.orderType {
		width: 702rpx;
		margin: 26rpx auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.button {
		display: flex;
		justify-content: space-evenly;
		margin-top: 44rpx;

		.Reset {
			width: 136rpx;
			height: 64rpx;
			background: rgba(227, 242, 252, 1);
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 64rpx;
			color: rgba(1, 153, 254, 1);
		}

		.Search {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			width: 136rpx;
			height: 64rpx;
			background: rgba(1, 153, 254, 1);
			border-radius: 32rpx;
			line-height: 64rpx;
		}
	}

	.statisticsList {
		width: 750rpx;
		height: auto;

		.title {
			margin-top: 49rpx;
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-around;

			.Header {
				width: 55rpx;
				height: 88rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				text-align: center;
			}

			.Headerlong {
				width: 114rpx;
				height: 88rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				text-align: center;
			}
		}

		.msg {
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-around;
			text-align: center;

			.msgShop {
				width: 72rpx;
				height: 88rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(77, 77, 77, 1);
			}

			.msgShoplong {
				width: 114rpx;
				height: 88rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(77, 77, 77, 1);
			}
		}
	}
</style>
